<!--
 * @Author: levi7754 levi7754@163.com
 * @Date: 2025-10-11 18:00:27
 * @LastEditors: levi7754 levi7754@163.com
 * @LastEditTime: 2025-10-13 11:56:16
 * @FilePath: \udp-nature-mall\components\s-select-sku\s-select-sku.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 规格弹窗 -->
  <su-popup :show="show" round="10" @close="emits('close')">
    <view class="ss-modal-box bg-white ss-flex-col">
      <view class="modal-header ss-flex ss-col-center">
        <view class="header-left ss-m-r-30">
          <image
            class="sku-image"
            :src="fileUrl + (state.selectedSkuPrice.pictureUrl?.url || goodsInfo.pictureUrl?.url)"
            mode="aspectFill"
          ></image>
        </view>
        <view class="header-right ss-flex-col ss-row-between ss-flex-1">
          <view class="goods-title ss-line-2">{{ goodsInfo.spu_desc }}</view>
          <view class="header-right-bottom ss-flex ss-col-center ss-row-between">
            <view class="ss-flex">
              <view v-if="goodsPrice.price > 0" class="price-text">
                {{ goodsPrice.price }}
              </view>
              <view class="ss-flex">
                <view
                  v-if="goodsPrice.price > 0 && goodsPrice.score > 0"
                  class="score-text ss-m-l-4"
                  >+</view
                >
                <image
                  v-if="goodsPrice.score > 0"
                  :src="udp.$url.static('/static/img/shop/goods/score1.svg')"
                  class="score-img"
                ></image>
                <view v-if="goodsPrice.score > 0" class="score-text">
                  {{ goodsPrice.score }}
                </view>
              </view>
            </view>

            <view class="stock-text ss-m-l-20">
              <!-- {{
                state.selectedSkuPrice.on_hand_quantity || state.selectedSkuPrice.on_hand_quantity === 0
                  ? formatStock("exact", state.selectedSkuPrice.on_hand_quantity)
                  : formatStock("exact", goodsInfo.totalStock)
              }} -->
            </view>
          </view>
        </view>
      </view>
      <view class="modal-content ss-flex-1">
        <scroll-view scroll-y="true" class="modal-content-scroll" @touchmove.stop>
          <view class="sku-item ss-m-b-20" v-for="sku1 in state.productAttrList" :key="sku1.id">
            <view class="label-text ss-m-b-20">{{ sku1.title }}</view>
            <view class="ss-flex ss-col-center ss-flex-wrap">
              <button
                  class="ss-reset-button spec-btn"
                  v-for="sku2 in sku1.options.filter(i=>i.name)"
                  :class="[
                  {
                    'ui-BG-Main-Gradient': state.currentSkuMap[sku1.name] === sku2.name,
                  }
                ]"
                  :key="sku2.name"
                  @tap="onSelectSku(sku2.name, sku1.name)"
              >
                {{ sku2.name }}
              </button>
            </view>
          </view>
          <view class="buy-num-box ss-flex ss-col-center ss-row-between ss-m-b-40">
            <view class="label-text">{{ $t("mall.purchaseQty") }}</view>
            <su-number-box
              :min="1"
              :max="state.selectedSkuPrice.order_quantity_uom"
              :step="1"
              v-model="state.selectedSkuPrice.buyNum"
              @change="(val)=>state.selectedSkuPrice.buyNum = val"
            ></su-number-box>
          </view>
        </scroll-view>
      </view>
      <view class="modal-footer border-top">
<!--        <view-->
<!--          class="buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center"-->
<!--          v-if="isScore"-->
<!--        >-->
<!--          <button class="ss-reset-button score-btn ui-Shadow-Main" @tap="onBuy">立即兑换</button>-->
<!--        </view>-->
        <view class="buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center">
          <button class="ss-reset-button add-btn ui-Shadow-Main" @tap="onAddCart"
            >{{ $t('mall.AddCart') }}</button
          >
          <button class="ss-reset-button buy-btn ui-Shadow-Main" @tap="onBuy">{{ $t('mall.buyNow') }}</button>
        </view>
      </view>
    </view>
  </su-popup>
</template>

<script setup>
  import { computed, reactive, watch } from 'vue';
  // import { formatStock } from '@/sheep/hooks/useGoods';
  import { isEmpty, clone, isString } from 'xe-utils';
  import { useI18n } from 'vue-i18n';
  import {useStore } from "vuex"
  import { udp, fileUrl } from "@/utils"

  const emits = defineEmits(['change', 'addCart', 'buy', 'close']);
  const props = defineProps({
    goodsInfo: {
      type: Object,
      default() {},
    },
    show: {
      type: Boolean,
      default: false,
    },
    isScore: {
      type: Boolean,
      default: false,
    },
  });

  const { t } = useI18n()
  const store = useStore()

  const cart = store.state.cart

  const state = reactive({
    selectedSkuPrice: { buyNum: 1 },
    currentSkuArray: [],
    currentSkuMap: {},
    productAttrList: []
  });

  console.log("goodsInfo====", props.goodsInfo)

  // 默认单规格
  if (props.goodsInfo.sku_list.length < 2) {
    state.selectedSkuPrice = {...props.goodsInfo.sku_list[0], buyNum: 1, productName:props.goodsInfo.spu_desc}
    // state.currentSkuMap = state.goodsInfo?.spec_attrs && JSON.parse(state.goodsInfo?.spec_attrs);
    const currentSkuMap = props.goodsInfo?.spec_attrs ? JSON.parse(props.goodsInfo?.spec_attrs) : {};
    console.log("currentSkuMap ===", currentSkuMap)
    state.currentSkuMap = { [currentSkuMap[0].name]: currentSkuMap[0].options[0].name }
  }

  const skuList = props.goodsInfo.sku_list;

  // 可选规格
  const skuPrices = computed(() => {
    return  props.goodsInfo.sku_list;
    // if (props.goodsInfo.is_sku) {
    //   skuPrices.forEach((item) => {
    //     item.goods_sku_id_arr = item.goods_sku_ids.split(',');
    //   });
    // }
    // return skuPrices;
  });

  watch(
    () => state.selectedSkuPrice,
    (newVal) => {
      emits('change', newVal);
    },
    {
      immediate: true, // 立即执行
      deep: true, // 深度监听
    },
  );
 

  // 可选择款式对象
  const productAttrList = computed(() => {
    return JSON.parse(props.goodsInfo.spec_attrs);
  });


  state.productAttrList = clone(productAttrList.value, true)
  console.log(state.productAttrList)

  const goodsPrice = computed(() => {
    let price, score;
    if (isEmpty(state.selectedSkuPrice)) {
      price = props.goodsInfo.price;
      score = props.goodsInfo.score || 0;
    } else {
      price = state.selectedSkuPrice.price;
      score = state.selectedSkuPrice.score || 0;
    }
    return { price, score };
  });

  function onAddCart() {
    console.log('加入购物车')
    if (state.selectedSkuPrice.id || 1) {
      if (state.selectedSkuPrice.stock < 1) {
        udp.$helper.toast(t("tip.outOfStock"));
      } else {
        emits("addCart", state.selectedSkuPrice);
      }
    } else {
      udp.$helper.toast(t("tip.selectSpec"));
    }
  }

  function onBuy() {
    if (state.selectedSkuPrice.id) {
      if (state.selectedSkuPrice.stock < 1) {
        udp.$helper.toast(t("tip.outOfStock"));
      } else {
        emits('buy', state.selectedSkuPrice);
      }
    } else {
      udp.$helper.toast(t("tip.selectSpec"));
    }
  }
  // 改变禁用状态
  // function changeDisabled(isChecked = false, pid = 0, skuId = 0) {
  //   let newPrice = []; // 所有可以选择的 skuPrice
  //
  //   if (isChecked) {
  //     // 选中规格
  //     // 当前点击选中规格下的 所有可用 skuPrice
  //     for (let price of skuPrices.value) {
  //       if (price.order_quantity_uom <= 0) {
  //         // this.goodsNum 不判断是否大于当前选择数量，在 uni-number-box 判断，并且 取 order_quantity_uom 和 goods_num 的小值
  //         continue;
  //       }
  //       if (price.goods_sku_id_arr.indexOf(skuId.toString()) >= 0) {
  //         newPrice.push(price);
  //       }
  //     }
  //   } else {
  //     // 取消选中
  //     // 当前所选规格下，所有可以选择的 skuPrice
  //     newPrice = getCanUseSkuPrice();
  //   }
  //
  //   // 所有存在并且有库存未选择的规格项 的 子项 id
  //   let noChooseSkuIds = [];
  //   for (let price of newPrice) {
  //     noChooseSkuIds = noChooseSkuIds.concat(price.goods_sku_id_arr);
  //   }
  //
  //   // 去重
  //   noChooseSkuIds = Array.from(new Set(noChooseSkuIds));
  //
  //   if (isChecked) {
  //     // 去除当前选中的规格项
  //     let index = noChooseSkuIds.indexOf(skuId.toString());
  //     noChooseSkuIds.splice(index, 1);
  //   } else {
  //     // 循环去除当前已选择的规格项
  //     state.currentSkuArray.forEach((sku) => {
  //       if (sku.toString() != '') {
  //         // sku 为空是反选 填充的
  //         let index = noChooseSkuIds.indexOf(sku.toString());
  //         if (index >= 0) {
  //           // sku 存在于 noChooseSkuIds
  //           noChooseSkuIds.splice(index, 1);
  //         }
  //       }
  //     });
  //   }
  //
  //   // 当前已选择的规格大类
  //   let chooseSkuKey = [];
  //   if (!isChecked) {
  //     // 当前已选择的规格大类
  //     state.currentSkuArray.forEach((sku, key) => {
  //       if (sku != '') {
  //         // sku 为空是反选 填充的
  //         chooseSkuKey.push(key);
  //       }
  //     });
  //   } else {
  //     // 当前点击选择的规格大类
  //     chooseSkuKey = [pid];
  //   }
  //
  //   for (let i in skuList) {
  //     // 当前点击的规格，或者取消选择时候 已选中的规格 不进行处理
  //     if (chooseSkuKey.indexOf(skuList[i]['id']) >= 0) {
  //       continue;
  //     }
  //
  //     for (let j in skuList[i]['children']) {
  //       // 如果当前规格项 id 不存在于有库存的规格项中，则禁用
  //       if (noChooseSkuIds.indexOf(skuList[i]['children'][j]['id'].toString()) >= 0) {
  //         skuList[i]['children'][j]['disabled'] = false;
  //       } else {
  //         skuList[i]['children'][j]['disabled'] = true;
  //       }
  //     }
  //   }
  // }
  // 当前所选规格下，获取所有有库存的 skuPrice
  // function getCanUseSkuPrice() {
  //   let newPrice = [];
  //
  //   for (let price of skuPrices.value) {
  //     if (price.order_quantity_uom <= 0) {
  //       // || price.order_quantity_uom < this.goodsNum		不判断是否大于当前选择数量，在 uni-number-box 判断，并且 取 order_quantity_uom 和 goods_num 的小值
  //       continue;
  //     }
  //     var isOk = true;
  //
  //     state.currentSkuArray.forEach((sku) => {
  //       // sku 不为空，并且，这个 条 skuPrice 没有被选中,则排除
  //       if (sku.toString() != '' && price.goods_sku_id_arr.indexOf(sku.toString()) < 0) {
  //         isOk = false;
  //       }
  //     });
  //
  //     if (isOk) {
  //       newPrice.push(price);
  //     }
  //   }
  //
  //   return newPrice;
  // }
  // 选择规格
  // 选择规格
  function onSelectSku(childName, pname) {
    const opt = state.productAttrList.find(f => f.name === pname).options
    const skus = clone(props.goodsInfo.sku_list, true).filter(f => {
      f.sku_specs = isString(f.sku_specs) ? JSON.parse(f.sku_specs) : f.sku_specs
      return f.sku_specs[pname] === childName
    })
    console.log('====', skus)
    state.productAttrList = []
    skus.forEach(sku => {
      productAttrList.value.forEach(pattr => {
        if (sku.sku_specs[pattr.name] && !state.productAttrList.some(s => s.name === pattr.name)) {
          if (pattr.name !== pname) {
            const spec = pattr.options.find(f => f.name === sku.sku_specs[pattr.name])
            const data = clone(pattr, true)
            data.options = [spec]
            state.productAttrList.push(data)
          } else {
            state.productAttrList.push(pattr)
          }
        } else if (state.productAttrList.some(s => s.name === pattr.name)) {
          // 已存在规格
          const idx = state.productAttrList.findIndex(s => s.name === pattr.name)
          if (state.productAttrList[idx].options.some(s => s.name !== sku.sku_specs[pattr.name])) {
            state.productAttrList[idx].options.push({ name: sku.sku_specs[pattr.name] })
          }
        }
      })
    })
    console.log("state.productAttrList", state.productAttrList)
    if (!state.productAttrList.length) {
      state.productAttrList = clone(productAttrList.value, true)
    }
    console.log(opt, skus)
    const dbChildName = state.currentSkuMap[pname];
    if (!dbChildName || dbChildName !== childName) {
      // state.currentSkuMap[pname] = childName;
      const obj = {}
      state.productAttrList.forEach(f => {
        obj[f.name] = state.currentSkuMap[f.name]
        if (pname === f.name) {
          obj[f.name] = childName
        }
      })
      state.currentSkuMap = obj
    } else {
      delete state.currentSkuMap[pname];
    }
    //判断是否符合选中sku
    for (let i = 0; i < skuList.length; i++) {
      // const skus = skuList[i].sku_specs;
      const skus = JSON.parse(skuList[i].sku_specs);
      // if (Object.keys(skus).length !== Object.keys(state.currentSkuMap).length) {
      //   state.selectedSkuPrice = {};
      //   return;
      // }

      const list = Object.keys(skus).filter(item => skus[item] !== state.currentSkuMap[item]);
      if (!list || list.length < 1) {
        console.log(cart.list, skuList[i])
        // const item = cart.list.find(f => f.id === skuList[i].id)
        state.selectedSkuPrice = {...skuList[i],buyNum: 1, productName:props.goodsInfo.name};
        return;
      }
    }
    console.log("selectedSkuPrice", state.selectedSkuPrice)
  }

  // changeDisabled(false);
</script>

<style lang="scss" scoped>
$red: #ff3000; //ss-红
  // 购买
  .buy-box {
    padding: 10rpx 0;

    .add-btn {
      width: 356rpx;
      height: 80rpx;
      border-radius: 40rpx 0 0 40rpx;
      background-color: var(--ui-BG-Main-light);
      color: var(--ui-BG-Main);
    }

    .buy-btn {
      width: 356rpx;
      height: 80rpx;
      border-radius: 0 40rpx 40rpx 0;
      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
      color: #fff;
    }
    .score-btn {
      width: 100%;
      margin: 0 20rpx;
      height: 80rpx;
      border-radius: 40rpx;
      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
      color: #fff;
    }
  }

  .ss-modal-box {
    border-radius: 30rpx 30rpx 0 0;
    max-height: 1000rpx;

    .modal-header {
      position: relative;
      padding: 80rpx 20rpx 40rpx;

      .sku-image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
      }

      .header-right {
        height: 160rpx;
      }

      .close-icon {
        position: absolute;
        top: 10rpx;
        right: 20rpx;
        font-size: 46rpx;
        opacity: 0.2;
      }

      .goods-title {
        font-size: 28rpx;
        font-weight: 500;
        line-height: 42rpx;
      }
      .score-img {
        width: 36rpx;
        height: 36rpx;
        margin: 0 4rpx;
      }
      .score-text {
        font-size: 30rpx;
        font-weight: 500;
        color: $red;
        font-family: OPPOSANS;
      }
      .price-text {
        font-size: 30rpx;
        font-weight: 500;
        color: $red;
        font-family: OPPOSANS;
        &::before {
          content: '$';
          font-size: 30rpx;
          font-weight: 500;
          color: $red;
        }
      }

      .stock-text {
        font-size: 26rpx;
        color: #999999;
      }
    }

    .modal-content {
      padding: 0 20rpx;

      .modal-content-scroll {
        max-height: 600rpx;

        .label-text {
          font-size: 26rpx;
          font-weight: 500;
        }

        .buy-num-box {
          height: 100rpx;
        }

        .spec-btn {
          height: 60rpx;
          min-width: 100rpx;
          padding: 0 30rpx;
          background: #f4f4f4;
          border-radius: 30rpx;
          color: #434343;
          font-size: 26rpx;
          margin-right: 10rpx;
          margin-bottom: 10rpx;
        }
        .disabled-btn {
          font-weight: 400;
          color: #c6c6c6;
          background: #f8f8f8;
        }
      }
    }
  }
</style>
